<template>
	<comRoot :isShowLimitWarm="true" @execAfterToken="setReloadFun('token')">
		<template #page>
			<comDetailNavigateBack :title="commonNavTitle" />
			
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
			:src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" 
			class="bg" />
			
			<view class="reward-page relative">
				<view
					class="reward-info-content relative"
					:style="{
						height: `calc(100vh - ${commonNavHeight})`,
					}"
				>
					<view class="right-side-page">
						<view class="tab-boxes-icon fixed">
							<button class="trans-button" open-type="share" @click="share">
								<image
									class="oper-btn-icon"
									v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/common/ico-share.png`"
									mode=""
								></image>
							</button>
							<image
								class="oper-btn-icon"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/ico-desc.png`"
								mode=""
								@click="setShowRuleFun"
							></image>
						</view>
						<view class="goto-pages-icon fixed flex-direction-column flex-align-items-center">
							<image
								class="oper-btn-icon"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/ico-refresh.png`"
								mode=""
								@click="setReloadFun('loading')"
							></image>
							<image
								class="oper-btn-icon"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/ico-bag.png`"
								mode=""
								@click="gooPageUrl('/secondary/bagPage/bagPage')"
							></image>
						</view>
					</view>

					<view class="reward-content">
						<view class="content-select-award relative flex-justify-content-around">
							<view class="select-award-big relative">
								<view class="award-big-img relative flex-all-center" 
								@click="!bigGoodChooseInfo.reward_item_cover ? showPopupFun('big') : gooShopDetailFun('big')">
									<image
										v-if="commonConfigs && commonConfigs.domainFrontFileLink"
										class="bg"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/diybox-big-img.png`" mode="" />
									
									<image
										class="award-select-img absolute"
										v-if="commonConfigs && commonConfigs.domainFrontFileLink && !bigGoodChooseInfo.reward_item_cover" 
										style="width: 100rpx;height: 100rpx;"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/diybox-big-select.png`" mode="" />
									
									<view @click.stop="showPopupFun('big')"
										v-if="bigGoodChooseInfo.reward_item_cover"
										class="absolute flex-all-center" 
										style="width: 100%;height: 46rpx;left: 0;right: 0;margin: 0 auto;bottom: 30rpx;z-index: 10;">
										<image
											class="absolute"
											v-if="commonConfigs && commonConfigs.domainFrontFileLink"
											style="width: 72rpx;height: 32rpx;left: 0;right: 0;margin: 0 auto;bottom: -24rpx;"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/rechoose-icon.png`" mode="" />
									</view>
								
									<comPlaceImage
										v-if="bigGoodChooseInfo.reward_item_cover"
										style="width: 300rpx;height: 300rpx;overflow: hidden;"
										class="absolute award-select-img"
										placeImageClass="flex-all-center"
										:lazyLoad="true"
										:src="bigGoodChooseInfo.reward_item_cover"
										mode="heightFix"
									></comPlaceImage>
								</view>
							</view>
							
							<view class="select-award-small relative">
								<view class="award-small-img relative flex-all-center" 
									@click="!smallGoodChooseInfo.reward_item_cover ? showPopupFun('small') : gooShopDetailFun('small')"
									>
									<image
										class="bg"
										v-if="commonConfigs && commonConfigs.domainFrontFileLink"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/diybox-small-img.png`" mode="" />
									
									<image
										class="award-select-img absolute"
										v-if="commonConfigs && commonConfigs.domainFrontFileLink && !smallGoodChooseInfo.reward_item_cover" 
										style="width: 80rpx;height: 80rpx;"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/diybox-small-select.png`" mode="" />
										
									<view @click.stop="showPopupFun('small')"
										v-if="smallGoodChooseInfo.reward_item_cover"
										class="absolute flex-all-center" 
										style="width: 100%;height: 46rpx;left: 0;right: 0;margin: 0 auto;bottom: 0rpx;z-index: 10;">
										<image
											class="absolute"
											v-if="commonConfigs && commonConfigs.domainFrontFileLink"
											style="width: 72rpx;height: 32rpx;left: 0;right: 0;margin: 0 auto;"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/rechoose-icon.png`" mode="" />
									</view>
								
									<comPlaceImage
										v-if="smallGoodChooseInfo.reward_item_cover"
										style="width: 180rpx;height: 180rpx;overflow: hidden;"
										class="absolute award-select-img"
										placeImageClass="flex-all-center"
										:lazyLoad="true"
										:src="smallGoodChooseInfo.reward_item_cover"
										mode="heightFix"
									></comPlaceImage>
								</view>
							</view>
				
							<view class="font-hanserif-bold select-award-name absolute flex-all-center text-nowrap">
								<image
									class="bg"
									v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/select-award-bg.png`"
									mode=""
								></image>
								<view class="relative" style="margin-right: 10rpx;">
									心仪大奖：价值
									<text style="color: #63FFF7;font-size: 32rpx;">¥{{ bigGoodChooseInfo.recovery_price || '-' }}</text>
								</view>
								<view class="relative">
									保底奖：价值
									<text style="color: #63FFF7;font-size: 32rpx;">¥{{ smallGoodChooseInfo.recovery_price || '-' }}</text>
								</view>
							</view>
						</view>
						
						<view class="content-rate-box relative flex-all-center flex-direction-column">
							
							<image class="bg"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
								:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/rate-box-bg.png`" mode="" />
							
							<view class="content-input-num relative flex-all-center">
								<view class="relative">
									开箱金额：
								</view>
									
								<view class="input-num-box relative flex-justify-content-center">
									<!-- <fontStrokeView
										style="width: 200rpx;height: 100%;"
										title="心仪概率："
										bottomStyleStrokeColor="#111111"
									></fontStrokeView> -->
									
									<view class="flex-align-items-center text-center input-num-content relative"
										:style="{
											background: `url(${commonConfigs.domainFrontFileLink}/files/images/openbox/input-numer-bg.png) 0 0 no-repeat`,
											backgroundSize: 'cover',
										}"
									>
										<view class="oper-btn-num oper-btn-num-reduce flex-all-center relative" @click="setNumsFun('reduces')">
											<image
												v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
												style="width: 36rpx;height: 36rpx;"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/input-reduces-icon.png`" mode="" />
										</view>
										
										<input 
											v-if="isShowInput"
											v-model="inputNumberData" 
											type="digit"
											class="input-num"
											@blur="inputBlur" />
										
										<view class="oper-btn-num oper-btn-num-add flex-all-center relative" @click="setNumsFun('adds')">
											<image
												v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
												style="width: 36rpx;height: 36rpx;"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/input-adds-icon.png`" mode="" />
										</view>
									</view>
								</view>
							</view>
							
							
							<view class="content-rate-slider relative flex-all-center">
								<view class="relative" style="width: 220rpx;">
									<view>心仪概率：</view>
									<view class="relative" style="color: #6302A4;font-size: 20rpx;top: 10rpx;">可以任意拉动</view>
								</view>
								
								<view class="slider-box">
									<!-- <fontStrokeView
										style="width: 200rpx;height: 100%;"
										title="开箱金额："
										bottomStyleStrokeColor="#111111"
									></fontStrokeView> -->
									
									<!-- <view class="sider-flex"></view> -->
									
									<movable-area v-if="!showGoodPopup" class="sliderBar" :style="{ width: '100%', background: '#9EB9CE', }">
									<!-- <movable-area class="sliderBar" :style="{ width: 100 - rateSlideData.min + '%' }"> -->
									<!-- transition: 'all 0.1s', -->
										<view class="gone" :style="{ 
											width: rateSlideData.x + 'px', 
											'background': '#63FFF7',
											backgroundSize: 'cover',
										}"></view>
										
										<movable-view class="slider"
											:disabled="!isChangeLoading|| !bigGoodChooseInfo || !bigGoodChooseInfo.reward_item_id || !smallGoodChooseInfo || !smallGoodChooseInfo.reward_item_id"
											:x="oldRateSlideData.x" :animation="false" direction="horizontal" @change="onChange">
											<view class="slider-cursor flex-justify-content-center" :style="{ 
												'font-size': rateSlideData.text_fs,
												'background': `url(${commonConfigs.domainFrontFileLink}/files/images/openbox/rate-cursor-icon.png) 0 0 no-repeat`,
												'backgroundSize': 'cover',
												
											}">
												<view class="absolute slider-cursor-txt text-nowrap">{{ rateSlideData.score || 0 }}%</view>
											</view>
											<image :src="rateSlideData.icon" mode="widthFix" :style="{ width: rateSlideData.icon_w, height: rateSlideData.icon_h }"></image>
										</movable-view>
									</movable-area>
									
									<view :style="{ width: 0 }"></view>
									<!-- <view :style="{ width: 100 - rateSlideData.max + '%' }"></view> -->
								</view>
							</view>
						
						</view>
						
					</view>
					
					<view class="oper-btn-box flex-justify-content-between" v-if="rewardData && rewardData.reward_sheet_range">
						<view
							class="oper-btn-info flex relative"
							v-for="(item, index) in rewardData.reward_sheet_range"
							:key="index"
							@click="selectPayNumFun(item.reward_price_number, index)"
						>
							<view :class="['oper-btn-img', 'flex', 'flex-direction-column', 'flex-all-center', 'relative']">
								<image
									class="bg"
									v-if="commonConfigs && commonConfigs.domainFrontFileLink && currentPayBtnIndex !== index"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/buy-num-btn.png`"
								/>
								<image
									class="bg"
									v-if="commonConfigs && commonConfigs.domainFrontFileLink && currentPayBtnIndex === index"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/select-buy-num-btn.png`"
								/>

								<view :class="['oper-btn-detail', 'relative', currentPayBtnIndex === index ?'active' : '']">
									<view class="relative oper-btn-txt font-hanserif-bold" style="z-index: 2">{{ item.reward_price_desc }}</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="goto-btn-box relative flex-all-center">
						<image
							@click="setPreOrderFun"
							style="width: 326rpx;height: 88rpx;"
							v-if="commonConfigs && commonConfigs.domainFrontFileLink"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/goto-btn-img.png`"
						/>
					</view>
					
					<view class="detail-tab-btns flex margin-auto" :style="{ position: 'sticky1', left: 0, top: 0, 'z-index': 1000, background1: 'rgba(0, 0, 0, 0.6)' }">
						<view
							class="detail-tab-btn-txt text-nowrap relative flex-all-center font-hanserif-bold"
							:class="currentTabType === item.type ? 'active' : ''"
							v-for="(item, index) in tabAreaList"
							:key="index"
							@click="setTabAreaFun(item)"
						>
							<image
								class="bg"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/${currentTabType === item.type ? 'tabarea-item-active' : 'tabarea-item'}.png`"
								mode=""
							></image>
							<text class="relative font-hanserif-regular">{{ item.name }}</text>
						</view>
					</view>
					
					<view class="detail-pool">
						<!-- <image
							style="width: 361rpx;height: 101rpx;margin: 6rpx 0 6rpx 20rpx;"
							v-if="commonConfigs && commonConfigs.domainFrontFileLink"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/pool-record-img.png`"
						/> -->
						<template>
							<scroll-view scroll-y @scrolltolower="scrolltolower" :style="{
								height: 'calc(100vh - ' + commonNavHeight + ' - 524rpx)'
							}" class="detail-HC-info margin-auto">
								<view v-if="!resLists.length" style="width: 100%; height: 100%;">
									<comEmptyData></comEmptyData>
								</view>
								
								<view class="detail-HC-data relative flex-align-items-center" v-for="(item, index) in resLists" :key="index">
									<image
										class="bg"
										v-if="commonConfigs && commonConfigs.domainFrontFileLink"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/record-list.png`"
										mode=""
									></image>
									<template v-if="item && !item.nickname">
										<image
											class="detail-disble-btn"
											v-if="commonConfigs && commonConfigs.domainFrontFileLink"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/no-buy.png`"
											mode=""
										></image>
									</template>
									<template v-else>
										<view class="detail-HC-img absolute flex-all-center" 
										:style="{
											backgroundImage: `url(${commonConfigs.domainFrontFileLink}/files/images/infinite/record-sort.png)`
										}"
										>
											<text class="relative detail-HC-img-txt">{{ index + 1 }}</text>
										</view>
										<!-- <view class="detail-HC-cover flex-all-center relative">
											<image class="detail-HC-cover-img" :src="item.avatar" mode=""></image>
											<image
												class="absolute"
												v-if="item.vip_cover"
												:src="item.vip_cover"
												mode="heightFix"
												:style="{
													'border-radius': 'unset',
													'width': 'auto',
													'top': '-18rpx',
													'left': '-20rpx',
													'right': 0,
													'height': '110rpx',
													'margin': 'auto',
													'z-index': 1,
												}"
											></image>
										</view> -->
										<view class="detail-HC-title relative">
											<!-- <view class="detail-HC-name truncate">{{ item.nickname }}</view>
											<view class="detail-HC-dates truncate">{{ item.create_time }}</view> -->
											
											<view class="in-title-item flex-align-items-end">
												<view class="detail-HC-name truncate">{{ item.nickname }}</view>
												<view class="detail-HC-dates truncate">{{ item.create_time }}</view>
											</view>
											
											<view class="in-title-item flex font-hanserif-regular truncate">
												消费 
												<view class="font-hanserif-bold" style="color: #63FFF7;margin: 0 4rpx;">{{ item.reward_price_1 }}元</view> 
												以 
												<view class="font-hanserif-bold" style="color: #63FFF7;margin: 0 4rpx;">{{ item.diy_reward_rate }}%</view>
												的概率获得了
												<view v-if="item.is_special" class="truncate font-hanserif-bold" style="color: #44FFC4;margin-left: 4rpx;">
													<text style="margin-right: 4rpx;color: #44FFC4;">心仪大奖</text> 
													<text>·</text>
													<text style="margin-left: 4rpx;color: #44FFC4;">{{ item.reward_item_name }}</text>
												</view>
												<view v-else class="truncate font-hanserif-bold" style="color: #E3FF44;margin-left: 4rpx;">
													<text style="margin-right: 4rpx;color: #0F50A2;">保底奖</text>
													<text>·</text>
													<text style="margin-left: 4rpx;color: #E3FF44;">{{ item.reward_item_name }}</text>
												</view>
											</view>
										</view>
										<!-- <view class="detail-HC-type relative flex-direction-column flex-align-items-center">
											<image
												class="HC-type-tip"
												v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type && item.reward_item_type.toLowerCase() === 'hot'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/hot-icon.png`"
												mode="heightFix"
											></image>
											<image
												class="HC-type-tip"
												v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type && item.reward_item_type.toLowerCase() === 'cool'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/cool-icon.png`"
												mode="heightFix"
											></image>
											<image
												class="HC-type-tip"
												v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '全局'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/all-icon.png`"
												mode="heightFix"
											></image>
											<image
												class="HC-type-tip"
												v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type && item.reward_item_type.toLowerCase() === 'first'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/first-icon.png`"
												mode="heightFix"
											></image>
											<image
												class="HC-type-tip"
												v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type && item.reward_item_type.toLowerCase() === 'last'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/last-icon.png`"
												mode="heightFix"
											></image>
											<image
												class="HC-type-tip"
												v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '夺宝'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/treasure-icon.png`"
												mode="heightFix"
											></image>
											<image
												class="HC-type-tip"
												v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '叠叠'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/stacking-icon.png`"
												mode="heightFix"
											></image>
											<image
												class="HC-type-tip"
												v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '冲冲'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/flush-icon.png`"
												mode="heightFix"
											></image>
											<image
												class="HC-type-tip"
												v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '普通'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/ordinary-icon.png`"
												mode="heightFix"
											></image>
											<image class="HC-type-nums" 
												v-else 
												:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-` + (item.reward_item_type && item.reward_item_type.toLowerCase()) + '.png'"
												mode="heightFix"></image>
											<image
												class="HC-type-give absolute"
												v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.is_give === 1"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/gift.png`"
												mode=""
											></image>
											<view class="HC-type-name truncate">{{ item.reward_item_name }}</view>
										</view> -->
									</template>
								</view>
								
								<comLoadMore class="loadmore-txt" :loading="loading" :showLoadendTxt="showLoadendTxt"></comLoadMore>
							</scroll-view>
						</template>
					</view>
				</view>
				
				<comMask v-model="isShowRewardRes">
					<view class="award-result-uppop relative">
						<view class="award-result-box relative">
							<image
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/reward-box-bg.png`"
								class="bg"
								mode=""
							></image>
							<scroll-view class="" :style="{ height: `calc(100% - 18rpx)` }" scroll-y enable-flex scroll-with-animation>
								<comRewardList :awardData="awardData" v-if="isShowRewardRes"></comRewardList>
							</scroll-view>
						</view>
						<view class="award-result-btns flex flex-justify-content-evenly relative">
							<view class="relative result-btn-img" @click="gooPageUrl('/secondary/bagPage/bagPage')">
								<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/reward-bag-btn-cancel.png`"  class="bg" mode=""></image>
							</view>
							<view class="relative result-btn-img" @click="isShowRewardRes = false">
								<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/reward-btn-back.png`" class="bg" mode=""></image>
							</view>
						</view>
					</view>
				</comMask>
				
				<comRewardOrder 
					ref="comRewardOrder"
					v-model="isShowOrderUppop" 
					:poolTypeSence="poolTypeSence" 
					:rewardData="rewardData" 
					@setPayOrderFun="setPayOrderFun" 
					@setNextOrderFun="setNextOrderFun"
					@setSelectCouponFun="setSelectCouponFun" 
					@setCurrentPaysFun="setCurrentPaysFun"
					@setAgreeFun="$store.commit('SHOW_AGREEMENT_SET_FUN', true)"></comRewardOrder>
					
				<comRuleUppop v-model="isShowRuleUppop" 
					ruleName="DIY开箱说明"
					:type="type" :isShowPoolRuleTxt="true" :isShowCheckRuleFlag="isShowCheckRuleFlag" :ruleTypeValue="ruleTypeValue" :isNeedReadedClose="false" :isAllowedClickMaskClose="false">
					<template>
						<view v-html="ruleImgTxt"></view>
					</template>
				</comRuleUppop>
				
				<comPopup v-model="showGoodPopup" :title="goodPopupTitle" popupOfMaxHeight="86vh">
					<view class="font-hanserif-bold bag-top-box realtive"
						:style="{
							height: currentGoodPopupType === 'big' ? '475rpx' : '100rpx',
						}"
					>
						<!-- <image
							class="bg"
							style="width: 642rpx;height: 682rpx;left: 0;right: 0;margin: auto;"
							v-if="currentGoodPopupType === 'big' && commonConfigs && commonConfigs.domainFrontFileLink"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/big-award-bg.png`"
						/> -->
						
						<image
							class="relative"
							style="top: -70rpx;width: 476rpx;height: 475rpx;left: 0;right: 0;margin: 0 auto;"
							v-if="currentGoodPopupType === 'big' && commonConfigs && commonConfigs.domainFrontFileLink"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/big-award-img.png`"
						/>
						
						<view class="relative flex-all-center" 
							:style="{
								top: currentGoodPopupType === 'big' ? '-100rpx' : '20rpx',
							}">
							<view class="input-content-box relative" v-if="showGoodPopup">
								<input
									v-model="inputkeyData" 
									@input="getSearchAwardFun"
									maxlength="20"
									type="text"
									class="input-content-key flex-align-items-center" 
									placeholder="请输入赏品名称"
									placeholder-style="color: #768FB2;font-size: 24rpx;"
									:style="{
										width: '530rpx',
										height: '64rpx',
										'line-height': '64rpx',
										padding: '4rpx 20rpx 0 70rpx',
										background: `url(${commonConfigs.domainFrontFileLink}/files/images/openbox/award-input-bg.png) 0 0 no-repeat`,
										backgroundSize: 'cover',
									}"
									/>
							</view>
							
							<view class="relative input-btn-box flex-all-center" @click="changeSortFun">
								<!-- <image
									class="bg" style="width: 12rpx;height: 23rpx;"
									v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/award-sort-name.png`"
								/> -->
								<view class="relative flex-all-center">
									<text style="color: #FFFFFF;font-size: 28rpx;display: inline-block;white-space: nowrap;">价格顺序</text>
									<image
										:style="{
											'width': '20rpx',
											'height': '20rpx',
											'margin-left': '7rpx',
											'transform': sortName === 'desc' ? 'rotate(180deg)' : '',
										}"
										v-if="commonConfigs && commonConfigs.domainFrontFileLink"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/award-sort-icon.png`"
									/>
								</view>
							</view>
						</view>
					</view>
					
					<view class="bag-good-box relative" 
						:style="{ 
							height: `calc(86vh - 760rpx)`,
						}"
					>
						<view class="bag-goods-list flex flex-wrap" v-if="goodProductList && goodProductList.length">
							<view class="bag-goods-item" v-for="(item, index) in goodProductList" :key="index"
								@click="chooseGoodFun(item)">
								<view class="bag-goods-cover relative">
									<view class="bag-goods-type absolute" v-if="item.reward_item_type">
										<image class="bag-goods-type-img relative"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-` + item.reward_item_type.toLowerCase() + '.png'"
											mode="heightFix"></image>
									</view>
									<view class="bag-cover-box relative flex flex-direction-column flex-align-items-center">
										<image src="/static/images/public_imgs/goods-item-checked.png"
											class="bg bag-img-cover-active" v-if="item.chooseFlag" mode=""></image>
										<image class="bg bag-img-cover-border"
											v-if="item.reward_item_type"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/border-` + item.reward_item_type.toLowerCase() + '.png'">
										</image>
										<comPlaceImage class="reward-cover-img" :lazyLoad="true" :src="item.reward_item_cover"
											mode="aspectFill"></comPlaceImage>
					
										<view class="item-name-txt relative" v-if="showNoticeTxtFun(item.reward_item_name, 8)"
											style="text-align: center;">
											<uni-notice-bar class="uni-notice-bar" color="#111111" background-color="transparent"
												:scrollable="true" :single="true"
												:text="showNoticeTxtFun(item.reward_item_name, 8)" :speed="54"></uni-notice-bar>
										</view>
										<view class="truncate relative" v-else style="text-align: center;">
											{{ item.reward_item_name }}
										</view>
										<view class="item-price-txt relative">
											<template v-if="showNoticeTxtFun(item.recovery_price, 10)">
												<uni-notice-bar class="uni-notice-bar relative" color="#fff8bc"
													background-color="transparent" :scrollable="true" :single="true"
													:text="item.recovery_price + '机能'" :speed="50"></uni-notice-bar>
											</template>
											<template v-else>
												{{ item.recovery_price + '机能' }}
											</template>
										</view>
									</view>
								</view>
							</view>
					
						</view>
						<view v-else-if="goodProductList && !goodProductList.length && !loading" style="z-index: 0">
							<comEmptyData></comEmptyData>
						</view>
						<comLoading style="width: 100%;height: 100%;" v-if="loading"></comLoading>
					</view>
					
					<template #footer>
						<view class="flex-all-center" style="margin: 10rpx 0 20rpx;">
							<image
								style="width: 320rpx;height: 88rpx;margin-right: 30rpx;"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								@click="showGoodPopup = false"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/choose-cancel-btn.png`"
							/>
							<image
								@click="selectGoodFun"
								style="width: 320rpx;height: 88rpx;"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/choose-ok-btn.png`"
							/>
						</view>
					</template>
				</comPopup>
				
			</view>
		</template>
	</comRoot>
</template>

<script>
	import { payment } from '@/setupproject/PAYS_FUN';
	import { ACTIONS } from '@/store/modules/userStore';
	import store from '@/store';
	import audio from '@/setupproject/AVIDEO_FUN.js';
	import paging from '@/inmixed/paging.mixin.js';
	import otherpay from '@/inmixed/otherpay.mixin.js'
	import { boxIndexSetFun, wxAuthSetFun, addPhoneSetFun, setAsyncFunWait, throttleFun, debounceFun } from '@/setupproject/TOOLS_FUN';
	import { 
		getPoolDiyInfoApi, 
		getPoolDiyItemListApi, 
		getPoolDiyLogListApi, 
		getPoolDiySetItemApi,
		getRewardViewAgreementApi, 
		getPoolDiyOrderPreApi, 
		getPoolDiyOrderApi, 
		geRewardsApi,
		getRewardOrderPointPreApi,
		getRewardOrderPointApi,
		getContentHomeApi,
	 } from '@/setupproject/INTERFACE';

	export default {
		name: "diyBoxPage",
		mixins: [otherpay, paging],
		data() {
			return {
				commonNavTitle: '开箱',
	
				// 监听返回当前平台时触发支付结果事件
				payBeInfos: {
					isPayBackSence: false,
					isReward: true, // 是否是抽赏：全局赏、飞机赏、
					type: null,
					balance_order_num: null
				},
				apiPayTypeVal: 2,
				currentPayType: 'wxpay',
				
				isShowCheckRuleFlag: true,
				ruleTypeValue: 0,
				currentIdCoupon: '',
				poolTypeSence: '',
				type: 'diybox', //all 全局赏、HC 天梯竞技、treasure 夺宝赏、aplus 一番赏
				awardData: [],
				rewardPoolId: '',
				rewardData: {},
				isShowRewardRes: false,
				ruleImgTxt: '',
				isShowRuleUppop: false,
				rewardBtnNum: 1,
				isShowOrderUppop: false,
				submitLoading: false,
				
				isReloadFuning: false,
				
				rateSlideData: {
					min: 0,
					max: 100,
					text_fs: '28rpx',
					text_color: '#89f6ac',
					color: '#89f6ac',
					icon: `https://cdn2.kong1001.com/apps/front/files/images/openbox/rate-cursor-icon.png`,
					icon_w: '22rpx',
					icon_h: '35rpx',
					slideBarWidth: 0,
					x: 0,
					y: 0,
					score: 0,
				},
				oldRateSlideData: {
					x: 0,
					y: 0,
				},
				
				isInitRate: true,
				inputNumberData: 0,
				currentPayBtnIndex: 0,
				
				loading: true,
				showGoodPopup: false,
				goodPopupTitle: '选择心仪大奖',
				currentGoodPopupType: 'big',
				inputkeyData: '',
				goodProductList: [],
				bigGoodChooseInfo: {},
				smallGoodChooseInfo: {},
				sortName: 'desc',
				
				poolDiyInfoProfit: 0,
				
				currentTabType: 1,
				tabAreaList: [
					{ name: '心仪大奖记录', type: 1 },
					{ name: '我的记录', type: 2 },
				],
				
				isChangeLoading: true,
				
				isShowInput: true,
			};
		},
		computed: {
			boxSubIndex() {
				return this.$store.getters.boxSubIndex || 1;
			},
			commonNavHeight() {
				return this.$store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
			commonOnline() {
				return this.$store.getters.commonOnline;
			},
			showLoadendTxt() {
				return this.isShowPageLoadedTxt && !this.loading && this.resLists.length ? true : false;
			},
		},
		watch: {
			isShowOrderUppop(v) {
				if (!v) {
					this.submitLoading = false;
				}
			},
		},
		created() {
			this.$nextTick(() => {
				//#ifdef MP-WEIXIN
				let dom = uni.createSelectorQuery().in(this);
				//#endif
		
				//#ifndef MP-WEIXIN
				let dom = uni.createSelectorQuery();
				//#endif
				dom.select('.slider-box')
					.boundingClientRect(res => {
						this.rateSlideData.slideBarWidth = res.width;
					})
					.exec();
			});
		},
		async onLoad(options) {
			await (this.rewardPoolId = options.id);
			
			if (options.fromlink) {
				this.poolTypeSence = options.fromlink;
			}
			
			if (options.type) {
				this.type = options.type;
			}
			
			if (options.type === 'diybox') {
				this.commonNavTitle = 'Diy开箱';
			}
			
			await store.dispatch(ACTIONS.USER_INFO_GET_FUN);
			
			await this.isShowPoolAgreeFun();
		},
		
		onShow() {
			// #ifdef APP-PLUS
			if(this.$store.getters.detailRechargeFlag) {
				uni.$emit('update', 'comRewardOrder');
				
				// 详情页充值标志位
				this.$store.commit('SET_DETAIL_RECHARGE_FLAG', false);
				return;
			}
			// #endif
			
			// 监听返回当前平台时触发支付结果事件
			if(this.payBeInfos.isPayBackSence && ['adapay_mini', 'alipay', 'yeepay_wx', 'adapay_alipay', 'mbpay_jump_mini'].includes(this.currentPayType)){
				this.payBeInfos.isPayBackSence = !this.payBeInfos.isPayBackSence;
				this.$store.commit('SET_WATCH_PLAT_PARAMS', {
					'type': this.payBeInfos.type,
					'balance_order_num': this.payBeInfos.balance_order_num,
					'msg': '已购买成功，请去赏袋查看',
					'isReward': true
				});
			}
		},
		
		onShareAppMessage(e) {
			if (e.from === 'menu') {
				this.$store.commit('SHARE_INFO_SET_FUN', {
					title: this.rewardData.reward_pool_name,
					path: `/secondary/diyBoxPage/diyBoxPage?id=${this.rewardPoolId}&boxSubIndex=${this.boxSubIndex}&type=${this.type}&fromlink=${this.poolTypeSence}`,
					imageUrl: this.rewardData.reward_pool_detail_image,
					content: '',
					desc: ''
				});
			}
			uni.showLoading({
				title: '',
				mask: false
			});
			const promise = new Promise((resolve) => {
				setTimeout(() => {
					const {
						shareObjData
					} = this.$store.getters;
					resolve(shareObjData)
					uni.hideLoading();
				}, 200);
			});
		
			return {
				promise
			};
		},
		methods: {
			async setTabAreaFun(item) {
				if(item) {
					this.currentTabType = item.type;
				}
				
				this.pagingInitFun();
				this.resListsGetFun();
			},
			
			async onChange(e, i){
				if(e.detail.source !== 'touch') return;
				
				if(!this.isChangeLoading) return;
				this.isChangeLoading = false;
				
				let score = 0;
				let x = e.detail.x;
				
				if((x / this.rateSlideData.slideBarWidth) < (this.rateSlideData.min / 100)) {
					this.rateSlideData.x = 0;
					this.rateSlideData.score = 0;
					
					this.oldRateSlideData.x = this.rateSlideData.min / 100 * this.rateSlideData.slideBarWidth + 1;
					
					await setAsyncFunWait(1);
					
					uni.showToast({
						icon: 'none',
						title: `最小概率为${this.rateSlideData.min}%`
					});
					
					x = this.rateSlideData.min / 100 * this.rateSlideData.slideBarWidth;
					score = this.rateSlideData.min;
					
					this.rateSlideData.x = Number(x);
					
					this.$nextTick(async () => {
						this.oldRateSlideData.x = x;
					});
				}else if((x / this.rateSlideData.slideBarWidth) > (this.rateSlideData.max / 100)) {
					this.rateSlideData.x = this.rateSlideData.max / 100 * this.rateSlideData.slideBarWidth - 1;
					this.rateSlideData.score = this.rateSlideData.max;
					
					this.oldRateSlideData.x = this.rateSlideData.max / 100 * this.rateSlideData.slideBarWidth - 1;
					
					await setAsyncFunWait(1);
					
					uni.showToast({
						icon: 'none',
						title: `最大概率为${this.rateSlideData.max}%`
					});
					
					x = this.rateSlideData.max / 100 * this.rateSlideData.slideBarWidth;
					score = this.rateSlideData.max;
					
					this.rateSlideData.x = Number(x);
					
					this.$nextTick(async () => {
						this.oldRateSlideData.x = x;
					});
				}else{
					// 定义初始值
					// this.inputNumberData = (this.bigGoodChooseInfo.recovery_price / 2).toFixed(2);
					score = (parseFloat((e.detail.x / this.rateSlideData.slideBarWidth) * 100)).toFixed(2);
					this.rateSlideData.x = e.detail.x;
				}
				
				this.rateSlideData.score = Number(score);
				
				// if(this.bigGoodChooseInfo && this.bigGoodChooseInfo.reward_item_id && this.smallGoodChooseInfo && this.smallGoodChooseInfo.reward_item_id) {
				// 	debounceFun(this.setPoolDiySetItemFun('rate'), 300, false);
				// }

				this.inputNumberData = Number(((score / 100) * (this.bigGoodChooseInfo.recovery_price - this.smallGoodChooseInfo.recovery_price) + this.smallGoodChooseInfo.recovery_price) / (1 -  this.poolDiyInfoProfit / 100)).toFixed(2);
				
				this.isChangeLoading = true;
				
				this.$forceUpdate();
			},
			
			// inputBlur：debounceFun 防抖（操作， 时间，是否立即执行）
			async inputBlur(){
				if(!this.bigGoodChooseInfo || !this.bigGoodChooseInfo.reward_item_id || !this.smallGoodChooseInfo || !this.smallGoodChooseInfo.reward_item_id) {
					this.inputNumberData = 0;
					return uni.showToast({
						icon: 'error',
						title: '请先选择赏品~~'
					});
				}
				
				// 逻辑操作
				this.inputNumberData = parseFloat(this.inputNumberData);
				
				if (!this.inputNumberData) {
					await setAsyncFunWait(200);
					this.inputNumberData = 0;
					await setAsyncFunWait(200);
			
					uni.showToast({
						title: `金额不能低于0`,
						icon: 'none'
					});
				}
					
				this.accountPriceFun(0);
			},
			
			// setNumsFun：throttleFun 节流（操作， 时间，是否立即执行）
			async setNumsFun(type){
				if(!this.bigGoodChooseInfo || !this.bigGoodChooseInfo.reward_item_id || !this.smallGoodChooseInfo || !this.smallGoodChooseInfo.reward_item_id) {
					return uni.showToast({
						icon: 'error',
						title: '请先选择赏品~~'
					});
				}
				
				// 减少
				if (type === 'reduces') {
					if (this.inputNumberData <= 1) {
						return uni.showToast({
							title: '金额不能低于0',
							icon: 'none'
						});
					}
					this.inputNumberData = Number(this.inputNumberData) - 10;
					this.$forceUpdate();
				}
				// 新增
				if (type === 'adds') {
					// if (this.inputNumberData >= this.productInfos.product_max_num) {
					// 	return uni.showToast({
					// 		title: '金额已是最大',
					// 		icon: 'none'
					// 	});
					// }
					this.inputNumberData = Number(this.inputNumberData) + 10;
					this.$forceUpdate();
				}
				
				this.accountPriceFun(type);
				this.$forceUpdate();
			},
			
			async accountPriceFun(type) {
				console.log(this.inputNumberData)
				this.isShowInput = false;
				
				this.rateSlideData.score = (((this.inputNumberData * (1 - this.poolDiyInfoProfit / 100)) - this.smallGoodChooseInfo.recovery_price) / (this.bigGoodChooseInfo.recovery_price  - this.smallGoodChooseInfo.recovery_price) * 100).toFixed(2);
				
				this.rateSlideData.x = this.rateSlideData.score * this.rateSlideData.slideBarWidth / 100;
				
				let score = Number(this.rateSlideData.score);
				let x = Number(this.rateSlideData.x);
				
				let minPrice = Number(((this.rateSlideData.min / 100) * (this.bigGoodChooseInfo.recovery_price - this.smallGoodChooseInfo.recovery_price) + this.smallGoodChooseInfo.recovery_price) / (1 -  this.poolDiyInfoProfit / 100)).toFixed(2);
				let maxPrice = Number(((this.rateSlideData.max / 100) * (this.bigGoodChooseInfo.recovery_price - this.smallGoodChooseInfo.recovery_price) + this.smallGoodChooseInfo.recovery_price) / (1 -  this.poolDiyInfoProfit / 100)).toFixed(2);
				let numberPrice = Number(((this.rateSlideData.score / 100) * (this.bigGoodChooseInfo.recovery_price - this.smallGoodChooseInfo.recovery_price) + this.smallGoodChooseInfo.recovery_price) / (1 -  this.poolDiyInfoProfit / 100)).toFixed(2);
				
				if(Number(numberPrice) < Number(minPrice)) {
					this.oldRateSlideData.x = this.rateSlideData.min / 100 * this.rateSlideData.slideBarWidth + 1;
					
					await setAsyncFunWait(1);
					
					uni.showToast({
						icon: 'none',
						title: `最小开箱金额为${minPrice}`
					});
					
					x = this.rateSlideData.min / 100 * this.rateSlideData.slideBarWidth;
					score = this.rateSlideData.min;
					
					this.rateSlideData.x = x;
					
					this.inputNumberData = minPrice;
					
					this.$forceUpdate();
				}else if(Number(numberPrice) > Number(maxPrice)) {
					this.oldRateSlideData.x = this.rateSlideData.max / 100 * this.rateSlideData.slideBarWidth - 1;
					
					await setAsyncFunWait(1);
					
					uni.showToast({
						icon: 'none',
						title: `最大开箱金额为${maxPrice}`
					});
					
					x = this.rateSlideData.max / 100 * this.rateSlideData.slideBarWidth;
					score = this.rateSlideData.max;
					
					this.rateSlideData.x = x;
					
					this.inputNumberData = maxPrice;
					
					this.$forceUpdate();
				}else{
					this.rateSlideData.x = x;
				}
				
				let inputNumberData = Number(((score / 100) * (this.bigGoodChooseInfo.recovery_price - this.smallGoodChooseInfo.recovery_price) + this.smallGoodChooseInfo.recovery_price) / (1 -  this.poolDiyInfoProfit / 100)).toFixed(2);
				
				this.isShowInput = true;
				this.$forceUpdate();
				
				this.$nextTick(async () => {
					this.rateSlideData.score = Number(score);
					this.oldRateSlideData.x = Number(x);
					this.inputNumberData = inputNumberData;
					
					// #ifdef APP-PLUS
					if(!type) await this.setPoolDiySetItemFun('money');
					// #endif
				});
				
			},
			
			showPopupFun(type) {
				this.inputkeyData = '';
				this.sortName = 'desc';
				
				this.currentGoodPopupType = type;
				this.goodPopupTitle = (type === 'big' ? '选择心仪大奖' : '选择保底奖');
				
				this.showGoodPopup = !this.showGoodPopup;
				
				this.getRewardPoolInfoFun();
			},
			
			changeSortFun() {
				if(this.sortName === 'desc') {
					this.sortName = 'asc';
				}else if(this.sortName === 'asc') {
					this.sortName = 'desc';
				};
				this.getRewardPoolInfoFun();
			},
			
			chooseGoodFun(item) {
				this.goodProductList = this.goodProductList.map((it) => {
					return {
						...it,
						chooseFlag: item.reward_item_id === it.reward_item_id ? true : false,
					};
				});
			},
			
			async selectGoodFun() {
				let item = this.goodProductList
					.filter((item) => {
						return item.chooseFlag;
					})[0] || [];
				
				if(!item || !item.reward_item_id) {
					return uni.showToast({
						icon: 'error',
						title: '请选择赏品~~'
					});
				}
				
				item.recovery_price = Number(item.recovery_price);
				item.reference_price = Number(item.reference_price);
				
				if(this.currentGoodPopupType === 'big' && this.smallGoodChooseInfo && this.smallGoodChooseInfo.reward_item_id) {
					if(item.recovery_price <= this.smallGoodChooseInfo.recovery_price) {
						return uni.showToast({
							icon: 'none',
							title: '心仪大奖不能低于保底奖！'
						});
					}
				}
				
				if(this.currentGoodPopupType === 'small' && this.bigGoodChooseInfo && this.bigGoodChooseInfo.reward_item_id) {
					if(item.recovery_price >= this.bigGoodChooseInfo.recovery_price) {
						return uni.showToast({
							icon: 'none',
							title: '保底奖不能高于心仪大奖！'
						});
					}
				}
				
				this.showGoodPopup = false;
				
				if(this.currentGoodPopupType === 'big') this.bigGoodChooseInfo = item;
				if(this.currentGoodPopupType === 'small') this.smallGoodChooseInfo = item;
				
				if(this.bigGoodChooseInfo && this.bigGoodChooseInfo.reward_item_id && this.smallGoodChooseInfo && this.smallGoodChooseInfo.reward_item_id) {
					// 定义初始值
					// this.inputNumberData = (this.bigGoodChooseInfo.recovery_price / 2).toFixed(2);
					this.rateSlideData.score = 10;
					this.rateSlideData.x = this.rateSlideData.score * this.rateSlideData.slideBarWidth / 100;
					this.oldRateSlideData.x = this.rateSlideData.score * this.rateSlideData.slideBarWidth / 100;
					
					await this.setPoolDiySetItemFun('rate');
				}
			},
			
			async setPoolDiySetItemFun(type) {
				this.isShowInput = false;
				
				let params = {
					reward_pool_id: this.rewardPoolId,
					big_reward_item_id: this.bigGoodChooseInfo.reward_item_id, // big_reward_item_id	否	string	大奖物品ID
					small_reward_item_id: this.smallGoodChooseInfo.reward_item_id, // small_reward_item_id	否	string	小奖物品ID
				};
				
				if(type === 'rate') {
					params.big_item_rate = Number(this.rateSlideData.score); // big_item_rate	否	string	概率
				}
				
				if(type === 'money') {
					params.money = Number(this.inputNumberData);  // money	否	string	抽赏价格
				}
				
				const { data, code, msg } = await getPoolDiySetItemApi(params);
			
				if (code !== 200) {
					return uni.showToast({
						icon: 'none',
						title: msg,
						duration: 2000
					});
				}
				
				this.rateSlideData.score = Number(data.big_item_rate);
				this.rateSlideData.x = parseFloat(data.big_item_rate) * this.rateSlideData.slideBarWidth / 100;
				this.oldRateSlideData.x = parseFloat(data.big_item_rate) * this.rateSlideData.slideBarWidth / 100;
				
				this.inputNumberData = Number(data.money);
				this.isShowInput = true;
				
				this.$forceUpdate();
				// uni.showToast({
				// 	icon: 'none',
				// 	title: msg,
				// 	mask: true,
				// 	duration: 500,
				// });
			},
			
			// getSearchAwardFun：debounceFun 防抖（操作， 时间，是否立即执行）
			getSearchAwardFun: debounceFun(function(){
				// 逻辑操作
				this.getRewardPoolInfoFun();
			}, 500, false),
			
			async getRewardPoolInfoFun(type = 1) {
				this.goodProductList = [];
				
				const { data, code } = await getPoolDiyItemListApi({
					// remain_status_type: type,
					reward_pool_id: this.rewardPoolId,
					// reward_cur_box_num: this.boxSubIndex,
					order_type: this.sortName === 'asc' ? 2 : 1,
					reward_item_name: this.inputkeyData,
					is_special: this.currentGoodPopupType === 'big' ? 1 : 0,
				});
				
				if (code !== 200) return false;
				
				this.goodProductList = data;
			},
			
			numCalculation(nums, sums) {
				let res = 0;
				if (sums == 0) {
					res = 1;
				} else {
					res = nums / sums > 1 ? 1 : nums / sums;
				}
				return res;
			},
			
			share() {
				this.$store.commit('SHARE_INFO_SET_FUN', {
					title: this.rewardData.reward_pool_name,
					path: `/secondary/diyBoxPage/diyBoxPage?id=${this.rewardPoolId}&boxSubIndex=${this.boxSubIndex}&type=${this.type}&fromlink=${this.poolTypeSence}`,
					imageUrl: this.rewardData.reward_pool_detail_image,
					content: '',
					desc: ''
				});
			},
			
			selectPayNumFun(num, index) {
				this.currentPayBtnIndex = index;
			},
			
			async setPreOrderFun() {
				if (this.submitLoading) return;
			
				// #ifdef MP-WEIXIN
				// 支付前验证是否已登录
				if (!wxAuthSetFun()) return;
				// #endif
			
				// #ifdef APP-PLUS
				// 支付前验证是否已登录
				if (await store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// 支付前验证是否已绑定手机
				if (addPhoneSetFun()) return;
				// #endif
				
				if(!this.bigGoodChooseInfo || !this.bigGoodChooseInfo.reward_item_id || !this.smallGoodChooseInfo || !this.smallGoodChooseInfo.reward_item_id) {
					return uni.showToast({
						icon: 'error',
						title: '请先选择赏品~~'
					});
				}
				
				if(this.bigGoodChooseInfo && this.bigGoodChooseInfo.reward_item_id && this.smallGoodChooseInfo && this.smallGoodChooseInfo.reward_item_id) {
					await this.setPoolDiySetItemFun('rate');
					await setAsyncFunWait(300);
				}
				
				// 限额提醒
				this.getPayNotice();
			
				this.currentIdCoupon = '';
				this.rewardBtnNum = (this.rewardData.reward_sheet_range && this.rewardData.reward_sheet_range.length ? this.rewardData.reward_sheet_range[this.currentPayBtnIndex].reward_price_number : 1);
				this.$set(this.rewardData, 'cover', this.rewardData.reward_pool_detail_image);
				this.$set(this.rewardData, 'reward_num', this.rewardBtnNum);
				this.$set(this.rewardData, 'num', this.rewardBtnNum);
				this.$set(this.rewardData, 'name', this.rewardData.reward_pool_name);
				
				this.setNextOrderFun();
			},
			
			setSelectCouponFun(value) {
				this.currentIdCoupon = value;
				this.setNextOrderFun();
			},
			
			orderInfoDats() {
				return {
					use_currency_num: store.getters.commonPaySortList.includes(1) ? 1 : 0,
					use_balance: store.getters.commonPaySortList.includes(2) ? 1 : 0,
					reward_pool_id: this.rewardPoolId,
					// reward_cur_box_num: this.boxSubIndex,
					pay_channel: this.currentPayType,
					reward_num: this.rewardBtnNum,
					num_sort: this.appointFlag ? this.idList : null,
					coupon_id: store.getters.commonPaySortList.includes(3) ? this.currentIdCoupon : '',
				};
			},
			
			setCurrentPaysFun(value) {
				this.currentPayType = value;
			},
			
			gooShopDetailFun(type) {
				let item = {};
				
				item.reward_price_1 =  this.rewardData.reward_price_1;
				
				if(type === 'big') {
					item = {
						...item,
						...this.bigGoodChooseInfo,
					}
				}
				
				if(type === 'small') {
					item = {
						...item,
						...this.smallGoodChooseInfo,
					}
				}
				
				this.$store.commit('GLOBAL_DETAILS_SET_FUN', item);
				
				uni.navigateTo({
					url: `/secondary/goodDetailPage/goodDetailPage?type=${this.type}`
				});
			},
			
			gooPageUrl(url) {
				uni.navigateTo({
					url
				});
			},
			
			showNoticeTxtFun(name, len) {
				if (name) {
					var namelen = name.length, sum = 0; 
					for (var i = 0; i < namelen; i++) {
						// 中文: 字符编码大于255
						if (name.charCodeAt(i) > 255) {  
							sum += 2;  // 双字节, 累加2
						} else {
							sum++;  // 单字节, 累加1
						}
					}
					if (sum > len*2) {
						return name;
					}
				}
			},
			
			async setShowRuleFun() {
				let type = this.commonOnline ? 71 : 68;
				
				const { data } = await getContentHomeApi({ type });
				this.ruleImgTxt = data.content;
				this.isShowRuleUppop = true;
			},
			
			async isShowPoolAgreeFun () {
				let type = null;
				if (this.type === 'pk') {
					type = 59;
				} else if (this.type === 'treasure') {
					type = 60;
				} else if (this.type === 'aplus') {
					type = this.commonOnline ? 51 : 61;
				} else {
					type = 58;
				}
				
				this.ruleTypeValue = type;
				
				getRewardViewAgreementApi({
					id: type
				}).then(res => {
					if(res.code === 200) {
						if(res.data.reward_agreement) {
							this.isShowCheckRuleFlag = false;
						}
						if(!res.data.reward_agreement) {
							this.setShowRuleFun();
						}
					}
				})
			},
			
			async setReloadFun(e) {
				this.goodProductList = [];
				this.bigGoodChooseInfo = {};
				this.smallGoodChooseInfo = {};
				
				this.isReloadFuning = true;
				
				await store.commit('SHOW_LOADING_SET_FUN', true);
					
				await this.getRewardPoolDetailFun();
				// await this.getRewardPoolInfoFun(1);
				await this.pagingInitFun();
				await this.resListsGetFun();
				
				await store.commit('SHOW_LOADING_SET_FUN', false);
				
				this.isReloadFuning = false;
			},
			
			async getRewardResFun(order_num) {
				const { data, msg, code } = await geRewardsApi({
					order_num
				});
			
				if (code !== 200) {
					this.submitLoading = false;
					return uni.showToast({
						icon: 'none',
						title: msg,
						duration: 2000
					});
				}
			
				this.awardData = [];
				this.isShowOrderUppop = false;
				
				if(!uni.getStorageSync('isRewardAudioSwitch')) {
					audio.setPlayAVideo(`${this.commonConfigs.domainFrontFileLink}/files/avideo/open-box-audio.mp3`); // 中奖声音
				}
			
				for (let item of data.sort_detail) {
					this.awardData.push(item);
				}
			
				this.isShowRewardRes = true;
				await this.setReloadFun();
				await setAsyncFunWait(800);
				
				uni.showToast({
					icon: 'none',
					title: msg,
					mask: true,
					duration: 500,
				});
			
				this.submitLoading = false;
			},
			
			/* 需要固定为listsGetFun；以配合 paging.mixin */
			async listsGetFun(e) {
				if(!this.rewardPoolId) return;
				
				this.loading = true;
				let tempData, tempCode, resLists;
				
				const {
					data,
					code
				} = await getPoolDiyLogListApi({
					...this.pageInfoObj,
					// type: this.hotCoolTabType,
					reward_pool_id: this.rewardPoolId,
					// reward_cur_box_num: this.boxSubIndex,
					type: this.currentTabType, // 1全部池子,2个人池子
				});
				tempData = data;
				tempCode = code;
				resLists = tempData.rows;
				
				this.loading = false;
				
				if (tempCode !== 200) return false;
			
				/* 返回 到 paging.mixin 处理 */
				return {
					resLists,
					count: tempData.count
				};
			},
			
			setChangeBoxFun(type) {
				if (this.rewardData) {
					if (type === 'prev') {
						return this.boxSubIndex <= 1 ? false : true;
					}
					if (type === 'next') {
						return this.boxSubIndex >= this.rewardData.total_box_num ? false : true;
					}
				}
				return true;
			},
			
			async setNextOrderFun() {
				if(this.poolTypeSence === 'integral') {
					const { data, code } = await getRewardOrderPointPreApi(this.orderInfoDats());
					
					if (code !== 200) return false;
					
					if (!data) return;
					
					this.$set(this.rewardData, 'currency_num', data.currency_num);
					this.$set(this.rewardData, 'is_view_pay_agreement', data.is_view_pay_agreement);
					this.$set(this.rewardData, 'deduct_balance_rmb', data.deduct_balance_rmb || 0);
					this.$set(this.rewardData, 'deduct_currency_num_rmb', data.deduct_currency_num_rmb || 0);
					this.$set(this.rewardData, 'allPrice', data.reward_price_final);
					this.$set(this.rewardData, 'price', data.reward_price);
					this.$set(this.rewardData, 'beforePrice', data.reward_price_before_coupon);
					this.$set(this.rewardData, 'couponResult', data.coupon_resutl);
					this.$set(this.rewardData, 'points', data.points);
				}else{
					const { data, code } = await getPoolDiyOrderPreApi(this.orderInfoDats());
					
					if (code !== 200) return false;
				
					if (!data) return;
					
					this.$set(this.rewardData, 'currency_num', data.currency_num);
					this.$set(this.rewardData, 'is_view_pay_agreement', data.is_view_pay_agreement);
					this.$set(this.rewardData, 'deduct_balance_rmb', data.deduct_balance_rmb || 0);
					this.$set(this.rewardData, 'deduct_currency_num_rmb', data.deduct_currency_num_rmb || 0);
					this.$set(this.rewardData, 'allPrice', data.reward_price_final);
					this.$set(this.rewardData, 'price', data.reward_price);
					this.$set(this.rewardData, 'beforePrice', data.reward_price_before_coupon);
					this.$set(this.rewardData, 'couponResult', data.coupon_resutl);
					this.$set(this.rewardData, 'balance', data.balance);
					this.$set(this.rewardData, 'reward_price_1', data.reward_price_1);
				}
				
				this.isShowOrderUppop = true;
			},
			
			setDisableFun(status) {
				let disabled = false;

				if (this.totalRemainStockNum === 0) {
					disabled = true;
				} else if (status !== 'can') {
					disabled = true;
				}
				
				return disabled ? 'disabled' : '';
			},
			
			async getRewardPoolDetailFun(e) {
				const { data, code } = await getPoolDiyInfoApi({
					// reward_cur_box_num: this.boxSubIndex,
					reward_pool_id: this.rewardPoolId,
				});
				
				if (code !== 200) return false;
				
				this.rewardData = data;
				
				this.rateSlideData.score = parseFloat(data.big_item_rate) || 0;
				this.inputNumberData = parseFloat(data.money) || 0;
				
				//#ifdef MP-WEIXIN
				let dom = uni.createSelectorQuery().in(this);
				//#endif
				//#ifndef MP-WEIXIN
				let dom = uni.createSelectorQuery();
				//#endif
				dom.select('.slider-box')
					.boundingClientRect(res => {
						this.rateSlideData.slideBarWidth = res.width;
						this.rateSlideData.x = parseFloat(data.big_item_rate) * res.width / 100;
						this.oldRateSlideData.x = parseFloat(data.big_item_rate) * res.width / 100;
					})
					.exec();
					
				this.poolDiyInfoProfit = data.diy_profit || 0;
				
				// 模拟概率极值
				// this.rateSlideData.min = 10;
				// this.rateSlideData.max = 80;
				this.rateSlideData.min = data.min_rate;
				this.rateSlideData.max = data.max_rate;
				
				this.bigGoodChooseInfo.reward_item_id = data.big_reward_item_id;
				this.bigGoodChooseInfo.reward_item_name = data.big_reward_item_name;
				this.bigGoodChooseInfo.reward_item_cover = data.big_reward_item_cover;
				this.bigGoodChooseInfo.reward_item_type = data.big_reward_item_type;
				this.bigGoodChooseInfo.brand = data.big_brand;
				this.bigGoodChooseInfo.description = data.big_description;
				this.bigGoodChooseInfo.opus = data.big_opus;
				this.bigGoodChooseInfo.recovery_price = Number(data.big_recovery_price);
				this.bigGoodChooseInfo.reference_price = Number(data.big_reference_price);
				this.bigGoodChooseInfo.remarks = data.big_remarks;
				
				this.smallGoodChooseInfo.reward_item_id = data.small_reward_item_id;
				this.smallGoodChooseInfo.reward_item_name = data.small_reward_item_name;
				this.smallGoodChooseInfo.reward_item_cover = data.small_reward_item_cover;
				this.smallGoodChooseInfo.reward_item_type = data.small_reward_item_type;
				this.smallGoodChooseInfo.brand = data.small_brand;
				this.smallGoodChooseInfo.description = data.small_description;
				this.smallGoodChooseInfo.opus = data.small_opus;
				this.smallGoodChooseInfo.recovery_price = Number(data.small_recovery_price);
				this.smallGoodChooseInfo.reference_price = Number(data.small_reference_price);
				this.smallGoodChooseInfo.remarks = data.small_remarks;

				this.$forceUpdate();
			},
			
			async setPayOrderFun() {
				if (this.submitLoading) return;
				this.submitLoading = true;
				
				if(this.poolTypeSence === 'integral') {
					const { data: productInfos, code, msg } = await getRewardOrderPointApi(this.orderInfoDats());
					this.currentIdCoupon = '';
					if (code !== 200) {
						this.submitLoading = false;
						return uni.showToast({
							icon: 'none',
							title: msg
						});
					}
					
					try {
						if (!productInfos.is_need_wx_pay) {
							await this.getRewardResFun(productInfos.order_num)
							return (this.submitLoading = false);
						}
						await payment(productInfos, this.currentPayType || 'wxpay', this.apiPayTypeVal);
						await this.getRewardResFun(productInfos.order_num);
					} catch (e) {
						this.submitLoading = false;
						console.error(e);
					}
					this.submitLoading = false;
					return;
				}
			
				const { data: productInfos, code, msg } = await getPoolDiyOrderApi(this.orderInfoDats());
				this.currentIdCoupon = '';
				
				if (code !== 200) {
					this.submitLoading = false;
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}
			
				// 原生支付： 微信、小程序、支付宝
				if (['wxapp', 'wxpay', 'alipay_method', 'mbpay_wxmini'].indexOf(this.currentPayType) !== -1) {
					try {
						if (!productInfos.is_need_wx_pay) {
							await this.getRewardResFun(productInfos.order_num);
							return (this.submitLoading = false);
						}
			
						await payment(productInfos, this.currentPayType || 'wxpay', this.apiPayTypeVal);
						await this.getRewardResFun(productInfos.order_num);
					} catch (e) {
						this.submitLoading = false;
						console.error(e);
					}
					this.submitLoading = false;
					return;
				}
				
				// 第三方小程序微信
				if (['adapay_mini', 'yeepay_wx', 'adapay_alipay', 'lianlianpay', 'mbpay_jump_mini'].includes(this.currentPayType)) {
					try {
						if (!productInfos.is_need_wx_pay) {
							await this.getRewardResFun(productInfos.order_num, msg)
							return this.submitLoading = false;
						}
						productInfos.balance_order_num = productInfos.order_num
						return this.launchMPToPayFun(productInfos, this.currentPayType);
					} catch (e) {
						this.submitLoading = false;
						console.error(e);
					}
					return;
				}
			
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.reward-page {
		.reward-info-content {
			padding-bottom: 40rpx;
			overflow-x: hidden;
			overflow-y: auto;
			
			.right-side-page {
				.tab-boxes-icon {
					top: 260rpx;
					right: 0;
					z-index: 1000;
					
					.oper-btn-icon {
						width: 124rpx;
						height: 53rpx;
						margin-bottom: 20rpx;
					}
				}
				
				.goto-pages-icon {
					bottom: 380rpx;
					right: 20rpx;
					z-index: 1000;
					
					.oper-btn-icon {
						margin-bottom: 20rpx;
						width: 80rpx;
						height: 93rpx;
					}
				}
			}
			
			
			.reward-content {
				margin-top: 36rpx;
				.content-select-award {
					.select-award-big {
						z-index: 2;

						.award-big-img {
							width: 346rpx;
							height: 386rpx;
							
							.award-select-img {
								top: 40rpx;
								bottom: 0;
								left: 0;
								right: 0;
								margin: auto;
							}
						}
						
					}
					
					.select-award-small {
						top: 42rpx;
						z-index: 2;
						
						.award-small-img {
							width: 308rpx;
							height: 344rpx;
							
							.award-select-img {
								top: 40rpx;
								bottom: 0;
								left: 0;
								right: 0;
								margin: auto;
							}
						}
					}
					
					.select-award-name {
						padding: 0 10rpx;
						min-width: 660rpx;
						height: 62rpx;
						z-index: 10;
						bottom: -88rpx;
						font-size: 32rpx;
						color: #FFFFFF;
					}
				}
				
				.content-rate-box {
					width: 686rpx;
					height: 216rpx;
					margin: auto;
					margin-top: 120rpx;
					
					.content-rate-slider {
						width: 654rpx;
						height: 40%;
						
						// top: 60rpx;
						left: 0;
						right: 0;
						top: -20rpx;
						margin: 0 auto;
						
						font-size: 32rpx;
						color: #FFFFFF;
						font-weight: bold;
						.slider-box {
							display: flex;
							width: 100%;
							height: 15rpx;
							position: relative;
						
							&::before {
								content: '';
								position: absolute;
								height: 15rpx;
								// border-radius: 8rpx;
								// background: url('https://cdn2.kong1001.com/apps/front/files/images/openbox/rate-cursor-bg.png') 0 0 no-repeat;
								background-size: cover;
								top: 50%;
								left: 0;
								transform: translateY(-50%);
								width: 100%;
							}
						
							.sider-flex {
								flex: 1;
								height: 15rpx;
								// border-radius: 8rpx 0 0 8rpx;
								margin-top: 12rpx;
								position: relative;
								z-index: 1;
							}
						
							.sliderBar {
								height: 100%;
								// border-radius: 8rpx;
								width: 100%;
								border-radius: 6rpx;
								.gone {
									height: 100%;
									position: absolute;
									left: 0;
									// height: 18rpx;
									top: 0rpx;
									max-width: 100%;
									z-index: 1;
									border-radius: 6rpx;
									// border-radius: 0 8rpx 8rpx 0;
								}
						
								.slider {
									width: 0;
									height: 100%;
									position: relative;
									z-index: 2;
						
									image {
										position: absolute;
										// border-radius: 16rpx;
										transform: translatex(-50%);
									}
						
									.slider-cursor {
										position: absolute;
										min-width: 72rpx;
										padding: 0 8rpx;
										height: 32rpx;
										font-size: 20rpx;
										color: #FFFFFF;
										top: -10rpx;
										// left: 50%;
										text-align: center;
										// transform: translateX(-50%);
										
										.slider-cursor-txt {
											bottom: 0;
											height: 32rpx;
											line-height: 32rpx;
											font-size: 20rpx;
											padding: 0rpx 8rpx;
										}
						
										&::after {
											content: '';
											position: absolute;
											border: 6rpx solid transparent;
											top: 99%;
											left: 50%;
											transform: translateX(-50%);
										}
									}
								}
							}
						}
					}
				}
				
				.content-input-num {
					width: 654rpx;
					height: 30%;
					font-size: 32rpx;
					color: #FFFFFF;
					font-weight: bold;
					margin: auto;
					
					.input-num-box {
						// width: 86%;
						
						// top: 100rpx;
						left: -4rpx;
				
						
						.input-num-content {
							width: 480rpx;
							// margin: 0 28rpx 0 24rpx;
							height: 40rpx;
							min-height: 40rpx;
							
							.oper-btn-num {
								width: 36rpx;
								height: 36rpx;
							}
						
							.input-num {
								width: 529rpx;
								// margin: 0 28rpx 0 24rpx;
								height: 40rpx;
								min-height: 40rpx;
								line-height: 1;
								font-size: 32rpx;
								color: #FFFFFF;
							}
						}
					}
				}
				
				
			}
			
			.oper-btn-box {
				bottom: 0;
				z-index: 100;
				width: 95%;
				// height: 100rpx;
				margin: auto;
				margin-top: 40rpx;
				
				.oper-btn-info {
					width: 122rpx;
					height: 48rpx;
					margin: 0 18rpx;
					font-size: 24rpx;
					
					.oper-btn-img {
						width: 100%;
						height: 100%;
					}
					
					.oper-btn-detail {
						font-size: 24rpx;
						color: #A0C2E2;
						
						&.active {
							color: #FFFFFF;
						}
					}

				}
				
			}
			
			.goto-btn-box {
				margin: 40rpx auto;
			}
			
			.detail-tab-btns {
				padding: 8rpx 0rpx 8rpx 20rpx;
				overflow-x: auto;
				margin-top: 12rpx;
				margin-bottom: 32rpx;
				
				.detail-tab-btn-txt {
					width: 222rpx;
					height: 56rpx;
					margin-right: 24rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					
					&.active {
						color: #ffffff;
						font-weight: bold;
					}
				}
			}
			
			.detail-pool {
				.detail-pool-info {
					flex-wrap: wrap;
					margin-top: 22rpx;
					padding: 0 18rpx;
					
					.detail-pool-content {
						width: 178rpx;
						margin-bottom: 12rpx;
						
						&:nth-of-type(4n) {
							margin-right: 0rpx;
						}
						
						.detail-pool-cover {
							width: 178rpx;
							height: 183rpx;
							
							.detail-pool-img {
								width: 152rpx;
								height: 158rpx;
								overflow: hidden;
							}
							
							.detail-pool-tip {
								width: 108rpx;
								height: 48rpx;
								left: -8rpx;
								top: -8rpx;
							}
							
							.detail-pool-type {
								z-index: 100;
								max-width: 102rpx;
								height: 48rpx;
								left: 0rpx;
								top: 0rpx;
							}
						}
						
						.detail-pool-title {
							font-size: 20rpx;
							color: #fff;
							width: 100%;
							height: 26rpx;
							line-height: 26rpx;
							text-align: center;
							margin-top: 6rpx;
							
							&.detail-pool-nums {
								text-align: center;
								position: absolute;
								width: 57rpx;
								height: 30rpx;
								background: rgba(0, 0, 0, 1);
								bottom: 44rpx;
								right: 16rpx;
								border-radius: 0rpx 0rpx 10rpx 0rpx;
							}
						}
					}
				}
		
				.detail-rate-info {
					width: 700rpx;
					
					.detail-rate-data {
						font-size: 28rpx;
						color: #FFF;
						margin-bottom: 18rpx;
						width: 700rpx;
						height: 88rpx;
						padding: 0rpx 0 0 22rpx;
						
						.detail-rate-type {
							width: 70rpx;
							height: 54rpx;
						}
						
						.detail-rate-tip {
							width: 96rpx;
							height: 52rpx;
							margin-left: -10rpx;
							margin-right: -18rpx;
						}
						
						.detail-rate-nums {
							text-align: center;
							white-space: nowrap;
							margin: 0 22rpx;
							width: 82rpx;
						}
						
						.detail-rate-name {
							margin-right: 22rpx;
							width: 248rpx;
						}
						
						.detail-rate-txt {
							width: 152rpx;
							justify-content: flex-end;
							
							.rate-txt-give {
								width: 56rpx;
								height: 30rpx;
							}
							
							.rate-txt-nums {
								margin-right: 10rpx;
								flex-shrink: 0;
								width: 80rpx;
								height: 34rpx;
							}
							.rate-txt-name {
								white-space: nowrap;
								text-align: right;
								width: 72rpx;
							}
						}
					}
				}
		
				.detail-sort-info {
					width: 700rpx;
					
					.detail-sort-box {
						font-size: 18rpx;
						color: #fff;
						width: 700rpx;
						min-height: 110rpx;
						padding: 20rpx 0 8rpx 18rpx;
						margin-bottom: 20rpx;
						
						.detail-sort-cover {
							border-radius: 100%;
							margin-top: 12rpx;
							margin-left: 22rpx;
							margin-right: 28rpx;
							width: 76rpx;
							height: 76rpx;
							
							.sort-cover-img {
								border-radius: 100%;
								width: 68rpx;
								height: 68rpx;
								overflow: hidden;
							}
						}
						
						.detail-sort-data {
							width: 360rpx;
							margin-right: 18rpx;
							
							.detail-sort-name {
								.sort-name-icon {
									font-size: 22rpx;
									color: #7E4400;
									width: 94rpx;
									height: 34rpx;
									margin-right: 16rpx;
								}
								.sort-name-txt {
									width: 302rpx;
									font-size: 32rpx;
								}
							}
							
							.detail-sort-sums {
								flex-wrap: wrap;
								margin-top: 16rpx;
								
								.sort-sums-txt {
									font-size: 20rpx;
									color: #FFE000;
									width: 92rpx;
									height: 28rpx;
									margin-bottom: 12rpx;
									margin-right: 12rpx;
								}
							}
						}
						
						.detail-sort-title {
							width: 138rpx;
							text-align: right;
							white-wrap: nowrap;
							font-size: 30rpx;
							margin-top: 22rpx;
							margin-right: 28rpx;
							
							.sort-title-txt {
								font-size: 46rpx;
							}
						}
					}
				}
		
				.detail-tab-info {
					width: 100%;
					height: 58rpx;
					padding: 0 88rpx;
					color: #fff;
					font-size: 30rpx;
					margin-top: 18rpx;
					
					.detail-tab-data {
						text-align: center;
						flex: 1;
						
						.detail-tab-bg {
							display: none;
							bottom: 6rpx;
							left: 0;
							right: 0;
							margin: auto;
							width: 134rpx;
							height: 6rpx;
						}
						&.active {
							color: #FFDA4D;
							.detail-tab-bg {
								display: block;
							}
						}
					}
				}
				
				.detail-HC-info {
					width: 710rpx;
					
					.detail-HC-data {
						width: 710rpx;
						height: 144rpx;
						margin-bottom: 20rpx;
						padding: 14rpx 24rpx 0;
						
						.detail-disble-btn {
							width: 140rpx;
							height: 43rpx;
						}
						
						.detail-HC-img {
							height: 24rpx;
							font-size: 20rpx;
							color: #005157;
							background-repeat: no-repeat;
							background-size: cover;
							z-index: 100;
							left: 0rpx;
							top: 0rpx;
							width: 126rpx;
							line-height: 24rpx;
							.detail-HC-img-txt {
								margin-left: -12rpx;
							}
						}
						
						.info-record-detail {
							padding: 0rpx 28rpx 0;
							width: 710rpx;
							height: 112rpx;
							
							.record-sort-num {
								width: 83rpx;
								height: 42rpx;
								font-size: 22rpx;
								color: #fff;
								z-index: 100;
								left: 4rpx;
								top: 6rpx;
								
								.sort-num-txt {
									margin-left: -20rpx;
									top: -4rpx;
								}
							}
							
							.record-cover {
								width: 76rpx;
								height: 76rpx;
								margin-right: 24rpx;
								border-radius: 100%;
								
								.record-cover-img {
									width: 68rpx;
									height: 68rpx;
									overflow: hidden;
									border-radius: 100%;
								}
							}
							
							.record-name {
								width: 310rpx;
								
								.record-name-txt {
									color: #262727; 
									font-size: 32rpx;
								}
								.record-name-dates {
									color: #666666;
									margin-top: 6rpx;
									font-size: 24rpx;
								}
							}
							
							.record-award {
								width: 260rpx;
								margin-left: 24rpx;
								
								.record-award-type {
									width: 70rpx;
									height: 54rpx;
								}
								.record-award-name {
									color: #FF8B1D;
									font-size: 24rpx;
								} 
							}
						}
						
						.detail-HC-cover {
							width: 76rpx;
							height: 76rpx;
							margin-right: 28rpx;
							margin-left: 10rpx;
							border-radius: 100%;
							
							.detail-HC-cover-img {
								border-radius: 100%;
								width: 68rpx;
								height: 68rpx;
								overflow: hidden;
							}
						}
						
						.detail-HC-title {
							// width: 316rpx;
							width: 100%;
							
							.in-title-item {
								color: #FFFFFF;
								font-size: 28rpx;
								font-weight: 100;
								margin-top: 10rpx;
							}
							
							.detail-HC-name {
								max-width: 60%;
								color: #FFFFFF;
								font-size: 32rpx;
							}
							.detail-HC-dates {
								// margin-top: 6rpx;
								font-size: 24rpx;
								color: #FFFFFF;
								margin-left: 10rpx;
								font-weight: 100;
							}
						}
						
						.detail-HC-type {
							margin-left: 18rpx;
							width: 248rpx;
							
							.HC-type-give {
								width: 56rpx;
								height: 30rpx;
								right: 14rpx;
								top: 10rpx;
							}
							.HC-type-nums {
								width: 70rpx;
								height: 50rpx;
							}
							.HC-type-tip {
								width: 96rpx;
								height: 52rpx;
							}
							.HC-type-name {
								color: #FF8B1D;
								font-size: 24rpx;
							}
						}
					}
					
				}
			}
			

		}
	}
	
	.award-result-uppop {
		font-size: 22rpx;
		color: #111111;
		padding: 0 30rpx;
		
		.award-result-box {
			width: 670rpx;
			height: 782rpx;
			padding-top: 80rpx;
		}
	
		.award-result-btns {
			height: 70rpx;
			margin-top: 32rpx;
			
			.result-btn-img {
				width: 214rpx;
				height: 70rpx;
			}
		}
	}
	
	.bag-top-box {
		width: 100%;
		
		.input-content-box {
			font-size: 28rpx;
			color: #768FB2;
			.input-content-key {
				
			}
		}
		
		.input-btn-box {
			width: 136rpx;
			height: 50rpx;
			margin-left: 20rpx;
			font-size: 24rpx;
			color: #374E6E;
		}
	}
	
	.bag-good-box {
		padding-bottom: 82rpx;
		overflow-y: auto;
	
		.bag-goods-list {
			// margin-bottom: 190rpx;
			padding: 12rpx 18rpx;
			color: #FFF;
		}
	
		.bag-goods-item {
			width: 162rpx;
			margin: 0 20rpx 22rpx 0;
			font-size: 22rpx;
	
			&.bag-goods-item:nth-child(4n) {
				margin-right: 0;
			}
	
			.bag-goods-cover {
				margin-bottom: 4rpx;
	
				.bag-goods-type {
					top: 6rpx;
					left: 6rpx;
	
					.bag-goods-type-img {
						height: 34rpx;
						z-index: 98;
					}
				}
	
				.bag-cover-box {
					width: 171rpx;
					height: 242rpx;
					padding-top: 28rpx;
					color: #111111;
	
					.bag-img-cover-active {
						width: 196rpx;
						height: 270rpx;
						left: -14rpx;
						top: -14rpx;
						z-index: 97;
					}
	
					.reward-cover-img {
						border-radius: 12rpx;
						margin-top: 8rpx;
						width: 132rpx;
						height: 139rpx;
						margin-bottom: 4rpx;
					}
	
					.bag-img-cover-border {
						width: 171rpx;
					}
				}
	
				.good-num {
					width: 60rpx;
					height: 28rpx;
					bottom: 76rpx;
					right: 24rpx;
					background: rgba(0, 0, 0, 1);
					border-radius: 0rpx 0rpx 12rpx 0rpx;
				}
			}
	
			.item-name-txt {
				height: 26rpx;
				padding: 4rpx 4rpx 0;
				width: 100%;
			}
	
			.item-price-txt {
				top: 6rpx;
				height: 30rpx;
				line-height: 30rpx;
				font-size: 20rpx;
				color: #FF8B1D;
				white-space: nowrap;
				text-align: center;
			}
		}
	
	}
</style>
